<template>
	<view class="p-20r">
		<!-- 状态栏占位符h5 -->
		<view class="status_bar"></view>

		<!-- #ifdef MP -->
		<!-- 微信小程序胶囊区域占位 -->
		<view class="" :style="{'height':navibarHeight+'px'}" />
		<!-- #endif -->

		<view class="h-90r flex justify-between">
			<view @click="goBack" class="third-bg-color w-70r h-70r text-center rounded-35r"
				style="box-shadow: 2px 2px 6px 0px #A8A8A8;">
				<text class="text-40r leading-70r iconfont icon-zuojiantou"></text>
			</view>
			<view class="flex flex-center items-center h-80r w-150r ">
				<view class="third-bg-color h-40r w-40r rounded-20r" style="box-shadow: 2px 2px 6px 0px #A8A8A8;">
				</view>
				<view class="second-bg-color h-60r w-60r rounded-30r" style="box-shadow: 2px 2px 6px 0px #A8A8A8;">
				</view>
				<view class="third-bg-color h-40r w-40r rounded-20r" style="box-shadow: 2px 2px 6px 0px #A8A8A8;">
				</view>
			</view>
			<view class=" w-70r h-70r">
			</view>
		</view>

		<view class="mb-20r flex flex-center">
			<text class="text-20r second-color font-bold">穿衣自由，从自主设计开始</text>
		</view>

		<!-- 中间图案 -->
		<view class="flex flex-center mb-10r">
			<view class="flex items-end">
				<view class="flex items-center flex-center second-bg-color h-270r w-170r"
					style="border-radius:85rpx 85rpx 85rpx 0;color: #fff;">
					<text class="iconfont icon-female"></text>
				</view>
				<view class="flex items-center flex-center main-bg-color h-135r w-170r"
					style="border-radius:85rpx 85rpx 0 85rpx;color:#fff">
					<text class="iconfont icon-male"></text>
				</view>
			</view>
		</view>
		<!-- 中间图案 结束-->

		<!-- 头像选择 开始 -->
		<view class="flex pl-50r mb-10r flex-center justify-between">
			<text class="text-30r font-bold main-color mr-20r">请选择个人头像:</text>
			<uni-file-picker ref="uploadAvator" limit="1" @success="success" :del-icon="false" :auto-upload='false' disable-preview
				:imageStyles="imageStyles" file-mediatype="image"></uni-file-picker>
		</view>
		<!-- 头像选择 结束 -->



		<view class="pl-40r pr-40r">
			<view class="mb-20r">
				<fui-input v-model="nickname" style="box-shadow: 2px 2px 6px 0px #A8A8A8;" #left color="#00BAAD"
					isFillet inputBorder backgroundColor="#E5E5E5" clearable focus placeholder="请输入个人昵称" maxlength="15"
					required>
					<text class="text-main text-50r iconfont icon-zhanghao"></text>
				</fui-input>
				<fui-input v-model="username" style="box-shadow: 2px 2px 6px 0px #A8A8A8;" #left color="#00BAAD"
					marginTop="30" isFillet inputBorder backgroundColor="#E5E5E5" clearable focus placeholder="请输入用户名"
					maxlength="15" required>
					<text class="text-main text-50r iconfont icon-zhanghao"></text>
				</fui-input>
				<fui-input v-model="password" style="box-shadow: 2px 2px 6px 0px #A8A8A8;" #left marginTop="30"
					color="#00BAAD" isFillet inputBorder backgroundColor="#E5E5E5" password focus clearable
					placeholder="请输入密码" maxlength="15" required>
					<text class="text-main text-50r font-bold iconfont icon-mima"></text>
				</fui-input>
				<fui-input v-model="confirmPassword" style="box-shadow: 2px 2px 6px 0px #A8A8A8;" #left marginTop="30"
					color="#00BAAD" isFillet inputBorder backgroundColor="#E5E5E5" password focus clearable
					placeholder="请确认密码" maxlength="15" required>
					<text class="text-main text-50r font-bold iconfont icon-mima"></text>
				</fui-input>
			</view>



			<view class="pl-10r pr-10r">
				<fui-button @click="register" style="box-shadow: 2px 2px 6px 0px #A8A8A8;" bold radius="96rpx"
					:margin="['40rpx','0','20rpx','0']" background="#F5F3F3" color="#A8A8A8">注册并登录</fui-button>
			</view>

			<view class="flex items-center flex-center">
				<checkbox @click="checkAgrement" style="transform:scale(0.7)" :color="theme.mainColor"
					:checked="isChecked" />
				<mp-html class="text-20r" :content="userAgreement"></mp-html>
			</view>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				navibarHeight: 0,
				isChecked: false,
				username: '',
				nickname: '',
				password: '',
				confirmPassword: '',
				imageValue: [],
				imageStyles: {
					width: 80,
					height: 80,
					border: {
						color: "#D1D1D1", // 边框颜色
						width: "2px", // 边框宽度
						style: "solid", // 边框样式
						radius: '50%'
					}
				},
				userAgreement: '已阅读并同意<a href="http://www.ixuea.com/articles/4449">《用户协议》</a>和<a href="http://www.ixuea.com/articles/4467">《隐私政策》</a>'
			};
		},
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				// #ifdef MP
				uni.getSystemInfo({
					success: (r) => {
						let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						let statusBarHeight = r.statusBarHeight;
						this.navibarHeight = menuButtonInfo.height + (menuButtonInfo.top -
							statusBarHeight) * 2;
					}
				})
				// #endif
			},
			goBack() {
				uni.navigateBack()
			},
			register() {
				if (this.nickname.length > 15 || this.nickname.length < 3) {
					vk.toast('用户名格式不正确,长度在3~15之间', "none");
					return;
				}
				if (this.username.length > 15 || this.username.length < 6) {
					vk.toast('用户名格式不正确,长度在6~15之间', "none");
					return;
				}
				if (this.stringUtils.isBlank(this.password)) {
					vk.toast("请输入密码");
					return;
				}
				if (!this.stringUtils.isPassword(this.password)) {
					vk.toast('密码格式不正确,长度在6~15之间', "none");
					return;
				}
				if (this.stringUtils.isBlank(this.confirmPassword)) {
					vk.toast("请输入确认密码");
					return;
				}
				if (!this.stringUtils.isPassword(this.confirmPassword)) {
					vk.toast('确认密码格式不正确,长度在6~15之间', "none");
					return;
				}
				if (this.password != this.confirmPassword) {
					vk.toast('两次密码不一致', "none");
					return;
				}
				if (!this.isChecked) {
					vk.toast("请先阅读并同意用户协议和隐私权限");
					return;
				}
				this.$refs.uploadAvator.upload();

			},
			checkAgrement() {
				this.isChecked = this.isChecked ? false : true;
			},
			progress(e) {
				// console.log(e);
			},
			select() {

			},
			success(e) {
				
				const avatorUrl = e.tempFilePaths[0];
				vk.showLoading("加载中...");
				//注册后，会自动登录，并返回token保存
				vk.userCenter.register({
					data: {
						username: this.username,
						password: this.password
					},
					success: (data) => {
						let that = this;
						vk.userCenter.setAvatar({
							data: {
								avatar: avatorUrl,
								deleteOldFile: true, // 是否同时删除云储存内的旧头像文件，true代表是
							},
							success: (data) => {
								// 成功后的逻辑
								vk.userCenter.updateUser({
									data: {
										nickname:that.nickname,
									},
									success: (data) => {
										vk.hideLoading();
										// 成功后的逻辑
										vk.navigateToHome();	
									}
								});
							}
						});

						
					}
				});

			},
			fail() {
				vk.toast("头像上传失败，请重试", "fail");
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EAEBF0;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
